<template>
	<view class="container flex_C">
		<FeNavbar title="子账号管理" />
		<scroll-view scroll-y="true" style="height:0;flex:1;">
			<view class="flex_1">
				<view class="account_list_wrap">
					<view class="title">
						<text>当前子账户</text>
						<text class="number">({{list.length}})</text>
					</view>
					<view class="account_wrap" v-for="(item,index) in list" :key="item.subAccountId"
						@click.stop="gotoDetail(item,index)">
						<view class="flexV_sb">
							<text class="account">{{item.subAccountName}}</text>
							<view class="menu-btn" @click.stop="onOpera(index)">
								<image class="icon" src="/static/common/more_icon.png" mode="">
								</image>
							</view>
						</view>
						<view class="status_wrap flexV_sb">
							<text class="t1">状态</text>
							<!-- 异常 -->
							<template v-if="/异常/.test(item.status)">
								<text class="t1" style="--c:#F04848">{{item.status}}</text>
							</template>
							<!-- 未验证 -->
							<template v-else-if="/未验证/.test(item.status)">
								<text class="t1" style="--c:#7B828A">{{item.status}}</text>
							</template>
							<!-- 正常 -->
							<template v-else>
								<text class="t1" style="--c:#06B070">{{item.status}}</text>
							</template>

						</view>
						<view class="flexV_sb">
							<text class="t1">创建日期</text>
							<text class="t1">{{item.createTime}}</text>
						</view>
					</view>
					<view class="no-more-wrap" style="height: 100%;" v-if="!loading && !list.length">
						<view style="margin-top: 100rpx;">
							<u-empty :show="true" textColor="#999" text="暂无子账号" icon="/static/data.png">
							</u-empty>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn_wrap">
			<view class="primary-btn" @click="handleCreateAccount">+创建子账户</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="popup_wrap">
				<view class="title">{{pageStatus == "edit" ? "编辑子账户" :"创建子账户"}}</view>
				<view class="from_item">
					<view class="label">子账号邮箱</view>
					<input class="input" type="text" v-model="formDate.subAccountName" maxlength="255"
						confirm-type="next" placeholder="请输入子账号邮箱" />
				</view>
				<view class="from_item">
					<view class="label">api key</view>
					<input class="input" type="text" v-model="formDate.apiKey" maxlength="255" confirm-type="next"
						placeholder="请输入api key" />
				</view>
				<view class="from_item">
					<view class="label">secret key</view>
					<input class="input" type="text" v-model="formDate.secretKey" placeholder="请输入secret key" />
				</view>
			</view>
			<view class="btn_wrap">
				<view class="primary-btn" @click="create">{{pageStatus == "edit" ? "编辑子账户" :"创建子账户"}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		listApi,
		createApi,
		deleteApi,
		updateApi,
		accountInfo
	} from '@/api/subAccount.js'
	import {
		validateEmail
	} from "@/util/helper.js"

	export default {
		data() {
			return {
				show: false,
				list: [],
				loading: true,
				formDate: {
					subAccountName: '',
					apiKey: "",
					secretKey: "",
					operaIndex: 0
				},
				pageStatus: "" //页面状态，edit-编辑
			}
		},
		onLoad() {
			uni.setStorageSync('subAccountChange', true)
			uni.showLoading({
				title: '加载中~'
			})
			this.getList();
		},
		watch: {
			list: {
				handler(newV) {
					uni.setStorageSync('subAccountList', newV)
				}
			}
		},
		methods: {
			async getList() {
				this.loading = true;
				const res = await listApi();
				if (res.code == 200) {
					this.list = res.data.subAccounts.map((item) => {
						return {
							...item,
							createTime: this.momentFormat(item.createTime)
						}
					})
				}
				this.loading = false;
				uni.hideLoading()
			},
			async create() {
				const {
					subAccountName,
					apiKey,
					secretKey
				} = this.formDate;
				if (this.isEmpty(subAccountName)) {
					uni.showToast({
						title: '邮箱不能为空',
						icon: 'none'
					})
					return
				}
				if (!validateEmail(subAccountName)) {
					uni.showToast({
						title: "输入邮箱有误",
						icon: "none"
					})
					return
				}
				if (this.isEmpty(apiKey)) {
					uni.showToast({
						title: 'apiKey不能为空',
						icon: 'none'
					})
					return
				}
				if (this.isEmpty(secretKey)) {
					uni.showToast({
						title: 'secretKey不能为空',
						icon: 'none'
					})
					return
				}

				if (this.pageStatus == "edit") {
					uni.showLoading({
						title: '编辑中~'
					})
					const res = await updateApi(this.formDate.subAccountId, this.formDate);

					if (res.code == 200) {
						uni.showToast({
							title: '编辑成功',
						})

						this.resetInputValue();

						this.getList();
					}
					return
				}

				uni.showLoading({
					title: '创建中~'
				})
				const res = await createApi(this.formDate);
				uni.hideLoading()
				if (res.code == 200) {
					uni.showToast({
						title: '子账号创建成功',
						icon: 'success'
					})
					this.getList();
					this.resetInputValue();
				}
			},
			onOpera(index) {
				this.operaIndex = index;
				uni.showActionSheet({
					itemList: ['修改', '删除'],
					success: async (res) => {
						if (res.tapIndex == 0) {
							this.pageStatus = "edit";

							uni.showLoading({
								title: "获取中..."
							})
							accountInfo(this.list[index].subAccountId).then(result => {
								const childDetail = result.data;
								this.formDate["subAccountName"] = this.list[index].subAccountName;
								this.formDate["subAccountId"] = this.list[index].subAccountId;
								this.formDate["apiKey"] = childDetail.apiKey;
								this.formDate["secretKey"] = childDetail.secretKey;
								this.show = true;
							}).catch(() => {})
						}
						if (res.tapIndex == 1) {
							this.onDetele()
						}
					}
				});
			},
			onDetele() {
				const {
					operaIndex,
					list
				} = this;
				const {
					subAccountId
				} = this.list[this.operaIndex];
				uni.showModal({
					title: '温馨提示',
					content: '确定删除改子账号吗?',
					success: async () => {
						uni.showLoading({
							title: '删除中~'
						})
						const res = await deleteApi(subAccountId);
						uni.hideLoading()
						if (res.code == 200) {
							uni.showToast({
								title: '子账号删除成功',
								icon: 'success'
							})
							list.splice(operaIndex, 1)
							this.list = list
						}
					}
				})
			},

			gotoDetail(item, index) {
				// const subAccountList = uni.getStorageSync('subAccountList');
				// if (this.isEmpty(subAccountList)) {
				// 	uni.setStorageSync("subAccountList", this.list);
				// }
				// setTimeout(() => {
				this.toPages(`/pages/tabbar/mine/subAccount/detail?id=${item.subAccountId}&index=${index}`)
				// }, 500)
			},

			handleCreateAccount() {
				this.resetInputValue();
				this.show = true;
			},

			resetInputValue() {
				this.pageStatus = "";
				this.formDate = {
					subAccountName: '',
					apiKey: "",
					secretKey: "",
					operaIndex: 0
				}
				this.show = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-popup {
		position: fixed;
	}

	/deep/ .u-popup__content {
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		overflow: hidden;
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.account_list_wrap {
			padding: 32rpx;
			flex: 1;

			.title {
				font-weight: 600;
				font-size: 28rpx;
				color: #7B828A;

				.number {
					color: #A6ACB4;
					font-weight: 500;
				}
			}

			.account_wrap {
				padding: 24rpx 30rpx;
				margin-top: 24rpx;
				background: #F5F7F8;
				border-radius: 12rpx;

				.account {
					font-weight: 600;
					font-size: 28rpx;
					color: #26282B;
					line-height: 33rpx;
				}

				.menu-btn {
					padding: 10rpx 0 10rpx 20rpx;
					display: flex;
					justify-content: flex-end;
				}

				.icon {
					width: 24rpx;
					height: 24rpx;
				}

				.status_wrap {
					margin: 18rpx 0 14rpx 0;
					line-height: 28rpx;
				}

				.t1 {
					font-weight: 400;
					font-size: 24rpx;
					color: var(--c, #A6ACB4);
					line-height: 28rpx;
				}
			}
		}

		.btn_wrap {
			padding: 14rpx 64rpx;
			border-top: 1px solid #DBE0E6;
		}

		.popup_wrap {
			background: #FFFFFF;
			border-radius: 48rpx;
			padding: 72rpx 40rpx 30rpx 40rpx;

			.title {
				font-weight: 600;
				font-size: 34rpx;
				color: #26282B;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.from_item {
				margin-bottom: 24rpx;

				.label {
					font-weight: 400;
					font-size: 26rpx;
					color: #7B828A;
					margin-bottom: 16rpx;
				}

				.input {
					height: 96rpx;
					background: #EEF1F6;
					border-radius: 12rpx;
					padding: 0 24rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #26282B;
				}
			}
		}
	}
</style>